#{extends 'main.html' /}
#{set roles3:''/}
<form action="javascript:send_to_controller()" name="editUserStory" class="jqtransform" id="form" method="POST">
    <h2><a style ="color:#400040;" href = "@{Projects.showProject(project.getEntityId())}">${project.name}</a> > <a style ="color:#400040;" href = "@{UserStories.listStories(project.getEntityId())}">User Stories</a> > Edit</h2>
    <hr/>
#{secure.check 'Create/edit/Delete User story in my project'}
    <label>
        As a/an
    </label>
    <br/>
    <br/>
    #{secure.check 'Associate/disassociate application roles to/from a user story'}
    <div id="app_roles">
        #{list items:storyAppRoles, as:'appRole'}&nbsp;<a class = "link" href="disassociateRole/${appRole.getEntityId()}/${userStory.getEntityId()}" title="disassociate role">x</a>&nbsp;&nbsp;&nbsp;${appRole.name}
        <br>
        #{/list}
		<script>
			$(function(){
	        	$(".link").tipTip();
	    	});
		</script>
    </div>
    <a href = "associateRole/${userStory.getEntityId()}">+ Associate Roles</a>
    #{/secure.check}
    <br>
    <br>
    <label>
        Story description:
    </label>
    <br>
    <br/>
    <textarea rows="10" cols="30" name="story" id = "story" class="validate[required]">${userStory.story}</textarea>
    <br>
    <br>
    <label>
        Effort estimation:
    </label>
    <br>
    <br/>
    <input type="text" name="effortEstimation" id="effort" value="${userStory.effortEstimation}" />
    <br>
    <br>
    <br>
    <label>
        Creator:
    </label>
    <br>
    <br/>
    <input type="checkbox" name="user" value="${user.userName}" disabled=true>${user.userName}
    <br>
    <br>
    <label>
        Component assigned:
    </label>
    <br>
    <br/>
    <select name="component" id="component">
        #{list items:listOfComponents, as:'listOfComponents'} 
        #{if listOfComponents.name != 'Default component'} <option value="${listOfComponents.getEntityId()}">${listOfComponents.name}&nbsp;-&nbsp;${listOfComponents.project.name}</option>
        #{/if}
        #{/list}
    </select>
    <br>
    <script type="text/javascript">
        document.getElementById('component').value = '${comp.getEntityId()}'
    </script>
    <br>
    #{/secure.check}
    #{secure.check 'edit/set the priority of a user story in my project'}
    <label>
        Priority:
    </label>
    <br>
    <br/>
    <select name="priority" id="priority">
        <option value="Low">Low</option>
        <option value="Medium">Medium</option>
        <option value="High">High</option>
    </select>
    <br/>
    <br/>
    <script type="text/javascript">
        document.getElementById('priority').value = '${userStory.priority}'
    </script>
    #{/secure.check}
    #{secure.check 'Create/edit/Delete User story in my project'}
    <label>
        Component Dependency:
    </label>
    <br>
    <br/>
    <div id="comp_dep">
        #{list items:listOfComponents2 ,as:'comp_dep'}
        #{if comp_dep.name != 'Default component'}<input type="checkbox" name="component_depId" value="${comp_dep.getEntityId()}" id="${comp_dep.getEntityId()}" />&nbsp;${comp_dep.name}
        <br>
        <br>
        #{/if}
        #{/list}
    </div>
    #{list items:userStory.dependOnComponents, as:'dependComp'}
    <script type="text/javascript">
        document.getElementById('${dependComp.getEntityId()}').checked = true
    </script>
    #{/list}
    <br/>
    <br/>
    #{/secure.check}
    #{secure.check 'Edit dependances between user stories'}
    <label>
        Story Dependency:
    </label>
    <br/>
    <br/>
    <a id="choose_dep"href="#">Choose Stories</a>
    <br/>
    <br/>
    <div id='story_dep'>
        #{list items:userStories, as:'user_story'}
        #{list items:user_story.appRoles, as:'roles'}
        #{set roles3:roles3+roles.name+", " /}
        #{/list}
        <br>
        <input type="checkbox" name="userStoriesId" value="${user_story.getEntityId()}" id="${user_story.getEntityId()}" />As a/an #{get 'roles3' /} ${user_story.story}
        <br>
        #{set roles3:''/}
        #{/list}
        #{list items:userStory.dependOn, as:'dependon'}
        <script type="text/javascript">
            document.getElementById('${dependon.getEntityId()}').checked = true
        </script>
        #{/list}
        <br>
        <br/>
    </div>
    #{/secure.check}
    #{secure.check 'Create/edit/Delete User story in my project'}
    <div id="demo_info">
        <label>
            Demo Entry:
        </label>
        <br>
        <br>
        <a id="show_demo"href="#">Choose Demo Entries</a>
        <br>
        <br>
        <div id='listOfDemoEntries'>
            #{list items:userStory.demos, as:'demo'}
            <div id="demo_entry_${demo.getEntityId()}">                
                 &nbsp;<input type="checkbox" name="demoId" id="${demo.getEntityId()}" value="${demo.getEntityId()}" CHECKED DISABLED/>
				<div id="demo_desc_${demo.getEntityId()}" style="display: inline">${demo.demo}</div>&nbsp;&nbsp;<a onclick="$.fn.colorbox.close(); showDialogHelper('Confirmation','Are you sure you want to delete this demo entry?',true,'javascript:delete_demo(${demo.getEntityId()})','prompt');" href="#">x</a>&nbsp;&nbsp;<a id="edit_demo" onclick="javascript:edit_demo('${demo.getEntityId()}');" href="#">edit</a>
                
				<br>
                <br>
            </div>
				<div id='edit_demo_entry_${demo.getEntityId()}'>
		
					<form name="demoEntry" class="jqtransform" id="form" method="POST">
					
					Description*:
					<br><br>
					<textarea rows="10" cols="30" name="story" id="edit_demo_field_${demo.getEntityId()}" >${demo.demo}</textarea>
					<div id="error_${demo.getEntityId()}">						
					</div>				
					Type*:		
					<br>
					<select name="type" id="edit_type" class="edit_type_${demo.getEntityId()}">
						<option value="Sucess">Sucess</option>
						<option value="Failure">Failure</option>
					</select>
					<script type="text/javascript">
						var type = '${demo.type}';
						var id = '${demo.getEntityId()}';
						if( type == 'true' ){
							$('#.edit_type_'+id+'').val("Sucess");	
							
						}
						else{
							$('.edit_type_'+id+'').val("Failure");
						}
					</script>
					<br>
					<br>
					<input type="hidden" name="demoEntryId" value="${demo.getEntityId()}" id="demoEntryId">			
					<a id="confirm_edit_demo" onclick="edit_controller( '${demo.getEntityId()}' )" href="#">Submit</a>

					</form>
			
				</div>	
															
            #{/list} 
        </div>
        <a id="add_demo"href="#">+ Add new demo entry</a>
        <br>
        <br>
		<label>Associate to a Sprint:</label>
		<br>
		<br>
		<div id="nothing">
			No upcoming Sprints !
		</div>
		#{list items: allEvents, as:'events'}
			<div id="sprint">			
				<input type="checkbox" name="sprint" value="${events.getEntityId()}" id="sprint_${events.getEntityId()}"" /> ${events.name}
	
				<font size="1"><i>
					&nbsp;-&nbsp;${events.startDate.getTime()}
				</font></i>
			</div>
			<br>
			<script type="text/javascript">
				$("#nothing").hide();
			</script>
		#{/list}
		<br>
		<br>
		#{list items:userStory.events, as:'story_events'}
			<script type="text/javascript">
			$('input[id=sprint_${story_events.getEntityId()}]').attr('checked', true);
			</script>
		#{/list}
        <div id='done'>
            Demo Entry Added Successfully! 
        </div>
        <div id='demo_entry'>
            <form name="demoEntry" class="jqtransform" id="form" method="POST">
                Description*:
                <textarea rows="10" cols="30" name="story" id="demo"></textarea>
                <div id="error">
                </div>
                Type*: 
                <br>
                <select name="type" id="type">
                    <option value="Sucess">Sucess</option>
                    <option value="Failure">Failure</option>
                </select>
                <br>
                <br>
                <br>
                <br>
                <br>
                <a id="create_demo" href="#">Create Demo</a>
            </form>
        </div>
    </div>
    <script language="javascript">
        $(document).ready(function(){
            $("#listOfDemoEntries").hide();
            $("#show_demo").colorbox({
                width: "30%",
                inline: true,
                href: "#listOfDemoEntries",
                onOpen: function(){
                    $("#listOfDemoEntries").show();
					$("[id*=edit_demo_entry]").each(function() {
						$(this).hide();;
					});
					
                },
                onCleanup: function(){
                    $("#listOfDemoEntries").hide();
                },
            });
            var editDependences = '@{Security.checkPermission("Edit dependances between user stories",project)}';
            
            $("#done").hide();
            $("#story_dep").hide();
            if (editDependences) {
                $("#choose_dep").colorbox({
                    width: "30%",
                    inline: true,
                    href: "#story_dep",
                    onOpen: function(){
                        $("#story_dep").show();
                    },
                    onCleanup: function(){
                        $("#story_dep").hide();
                    },
                });
            }
            $("#demo_entry").hide();
            $("#add_demo").colorbox({
                width: "30%",
                inline: true,
                href: "#demo_entry",
                onOpen: function(){
                    $("#demo_entry").show();
                },
                onCleanup: function(){
                    $("#demo_entry").hide();
                },
            });
            $("#create_demo").colorbox({
                inline: true,
                href: "#done",
                onCleanup: function(){
                    $("#done").hide();
                    $("#demo_entry").hide();
                },
            });
        });
        $('#create_demo').click(function(){
            if ($('#demo').val() == "") {
                var error = '<FONT COLOR="#cc6600"> This is a required field </FONT>';
                $("#error").append($(error));
                $("#add_demo").colorbox.resize();
                return false;
            }
            else {
                var desc = $('#demo').val();
                var type = $('#type').val();
                $.post('@{DemoEntries.createDemoEntry()}', {
                    demo: desc,
                    type: type
                }, function(newDemo){
                    if (newDemo.length == 0) {
                        //alert("dup");
                        setTimeout($.fn.colorbox.close());
                        showDialog('Error', 'Duplicate Demo Entry', 'error');
                        //location.reload();		
                    }
					else{
	                    var html = '<div id="demo_entry_' + newDemo.id + '" ><input type="checkbox" name="demoId"  value="' + newDemo.id + '"CHECKED DISABLED/><div id="demo_desc_'+newDemo.id+' "style="display:inline">' + newDemo.demo +
	                    '</div>&nbsp;&nbsp;<a onclick="javascript:confirm_delete('+newDemo.id+');" href="#">x</a>&nbsp;&nbsp;<a id="edit_demo" onclick="javascript:edit_demo('+newDemo.id+');" href="#">edit</a> </div>';
						var html2="";	
						$.fn.colorbox.close();

html2 += "<div id=\"edit_demo_entry_"+newDemo.id+"\">";
html2 += "		";
html2 += "					<form name=\"demoEntry\" class=\"jqtransform\" id=\"form\" method=\"POST\">";
html2 += "					";
html2 += "					Description*:";
html2 += "					<br><br>";
html2 += "					<textarea rows=\"10\" cols=\"30\" name=\"story\" id=\"edit_demo_field_"+newDemo.id+"\">"+newDemo.demo+"<\/textarea>";
html2 += "					<div id=\"error_"+newDemo.id+"\">";
html2 += "						";
html2 += "					<\/div>				";
html2 += "					Type*:		";
html2 += "					<br>";
html2 += "					<select name=\"type\" id=\"edit_type\" class=\"edit_type_"+newDemo.id+"\">";
							if( type == "Sucess" ){
html2 += "						<option value=\"Sucess\" selected=\"selected\">Sucess<\/option>";
html2 += "						<option value=\"Failure\">Failure<\/option>";	
							}						
							else{
html2 += "						<option value=\"Sucess\">Sucess<\/option>";								
html2 += "						<option value=\"Failure\" selected=\"selected\">Failure<\/option>";								
							}
html2 += "					<\/select>";
html2 += "					<br>";
html2 += "					<br>";
html2 += "					<input type=\"hidden\" name=\"demoEntryId\" value=\""+newDemo.id+"\" id=\""+newDemo.id+"\">			";
html2 += "					<a id=\"confirm_edit_demo\" onclick='edit_controller("+newDemo.id+")' href=\"#\">Submit<\/a>";
html2 += "";
html2 += "					<\/form>";
html2 += "			";
html2 += "				<\/div>";
	                    $('#listOfDemoEntries').append($(html));
						$('#listOfDemoEntries').append($(html2));
					}
                });
                $("#done").show();                
                setTimeout($.fn.colorbox.close, 2000);
            }
        });
		function confirm_delete( id ){
			$.fn.colorbox.close();
			showDialogHelper('Confirmation','Are you sure you want to delete this demo entry?',true,'javascript:delete_demo('+id+')','prompt');
		}
        function delete_demo(id){
            //$.fn.colorbox.close();            
            var demoId = id;
            $.post('@{DemoEntries.deleteDemoEntry()}', {
                demoId: demoId
            }, function(){
                $('#demo_entry_' + demoId).remove();
            });
        }
		
		function edit_demo ( id ){			
			$('#edit_demo_entry_'+id+'').toggle();
			$("#show_demo").colorbox.resize();
			
		}
		function delete_demo( id ){	
		
		var demoId = id;
			$.post('@{DemoEntries.deleteDemoEntry()}', {demoId:demoId}, function(){
				$('#demo_entry_'+demoId).remove();		
			});
		}
		
		function edit_controller( id ){
            var story = $('#edit_demo_field_'+id+'').val();	
			if (story == "") {
                var error = '<FONT COLOR="#cc6600"> This is a required field </FONT>';
                $('#error_'+id+'').append($(error));
                $("#show_demo").colorbox.resize();
                return false;
            }
			else{
				var type = $("#edit_type").val();
				$.post('@{DemoEntries.editDemoEntry()}', {demoId:id, demo:story, type:type}, function( temp2 ){																	
					if ( temp2.length == 0 ){				
						var error = '<FONT COLOR="#cc6600"> This demo entry already exists </FONT>';
						$('#error_'+id+'').hide();
						$('#error_'+id+'').empty();
		                $('#error_'+id+'').append($(error));
						$('#error_'+id+'').fadeIn(2000);
		                $("#show_demo").colorbox.resize();
						$('#error_'+id+'').fadeOut(2000);
					}
					else{						
						var html = " "+story+" ";				
						$('#demo_desc_'+id+'').empty();
						$('#demo_desc_'+id+'').append(html);										
						$('#edit_demo_entry_'+id+'').toggle();	
						$("#show_demo").colorbox.resize();	
					}
							
				});				
			}							
		}				
    </script>
    #{/secure.check}<input type="hidden" name="storyId" value="${userStory.getEntityId()}" id="storyId">
	<input type="submit" value="Submit" id="submit_btn"/>
    <script>
        
        function send_to_controller(){
            var story = $('#story').val();
            var effort = $('#effort').val();
            var comp = $('#component').val();
            var comp_dep = [];
            $('#comp_dep :checked').each(function(){
                comp_dep.push($(this).val());
            });
            var demo = [];
            $('#listOfDemoEntries :checked').each(function(){
                demo.push($(this).val());
            });
			
            var priority = $('#priority').val();
            var story_dep = [];
            $('#story_dep :checked').each(function(){
                story_dep.push($(this).val());
            });
			
            var sprintId = [];
            $('#sprint :checked').each(function(){
                sprintId.push($(this).val());
            });			
            var userstory_id = $('#storyId').val();
            $.post('@{UserStories.editStory()}', {
                userStoryId: userstory_id,
                story: story,
                effortEstimation: effort,
                priority: priority,
                component: comp,
                userStoriesId: story_dep,
                component_depId: comp_dep,
                demoId: demo,
				sprintId: sprintId
            },function(){window.location.reload(true);});
            
        }
    </script>
